<template>
    <div class="Scene">
        <!-- svg绘制 -->
        <div class="SceneLineTop" :style="{left:`-${posi.x}px`}">
            <svg width="1334" height="30">
                <line x1="30" y1="30" x2="1334" y2="30" stroke="black" stroke-width="0.3" fill="#666" />
                <g v-for="(item,index) in topGroup" :key="item.ids">
                    <line class="linelimit" :x1="item.x1 + 30" :y1="item.y1" :x2="item.x2 + 30" :y2="item.y2" stroke="black"
                        stroke-width="0.3" fill="#666" />
                    <text class="linetext" v-if="item.text !== null" :x="(item.x1 - (`${item.text}`.length / 2) * 7) + 30" :y="item.y1 - 5"
                    :style="{fontSize: '.6rem', animationDelay:`${(0.01*index)+0.5}s`}"  fill="#213547">{{ item.text }}</text>
                </g>
            </svg> 
        </div>
        <div class="SceneLineLeft" :style="{top:`-${posi.y}px`}">
            <svg width="30" height="750">
                <line x1="30" y1="30" x2="30" y2="1334" stroke="black" stroke-width="0.3" fill="#666" />
                <g v-for="(item,index) in leftGroup" :key="item.ids">
                    <line class="linelimit" :x1="item.x1" :y1="item.y1 + 30" :x2="item.x2" :y2="item.y2 + 30" stroke="black"
                        stroke-width="0.3" fill="#666" />
                    <text class="linetext" v-if="item.text !== null " :x="item.x1 - (`${item.text}`.length / 2) * 12"
                        :y="item.y1 + ((`${item.text}`.length / 2) * 2) + 30" 
                        :style="{fontSize: '.6rem', animationDelay:`${(0.01*index)+0.5}s`}" 
                        fill="#213547">{{ item.text }}</text>
                </g>
            </svg>
        </div>
        <!-- 画布 -->
        <div class="scenebody"  
        @mousedown="onMousedownfn" 
        :style="{ transform: `scale(${salec}) translate(${posi.x}px,${posi.y}px)` }" ref="scenebody"><slot></slot></div>
    </div>
</template>
<script setup lang="ts"> 
import { emit } from 'process';
import { onMounted, reactive, ref,watch } from 'vue';
const props = defineProps(['salec']);
const emits = defineEmits(['changePosi'])
const keys = ref<Boolean>(false);
const scenebody = ref<HTMLElement>(null);
let hs = 10; //间隔
let scale = ref(10); // 缩放这里与画布的缩放同步 
let posi = reactive({x:10,y:10});
let startposi = reactive({x:0,y:0});
const viewprot = ref<number>(0);
watch(()=>props.salec,()=>{ 
    scale.value=((props.salec*10)); 
},{
    immediate:true
})



let topGroup = ref<Array<{
    x1: number,
    y1: number,
    x2: number,
    y2: number,
    text: number | null,
    ids: number
}>>([]);
let leftGroup = ref<Array<{
    x1: number,
    y1: number,
    x2: number,
    y2: number,
    text: number | null,
    ids: number
}>>([]); 

// 创建标尺
const createdoms = ()=>{
    for (let n = 0; n < (1334+750)*(1334/750); n = n + hs) {
        // 标尺与画布的缩放是相反的 画布越小 尺寸就越小 
        let xORy =  ((n * hs) * props.salec/10);
    if (n % 50 == 0) { 
        topGroup.value.push({
            x1: xORy,
            y1: 20,
            x2: xORy,
            y2: 30,
            text: n==0?null:n,
            ids: (Math.random() * 1000)
        })
        leftGroup.value.push({
            x1: 20,
            y1: xORy,
            x2: 30,
            y2: xORy,
            text: n==0?null:n,
            ids: (Math.random() * 1000)
        })
    } else {
        topGroup.value.push({
            x1: xORy,
            y1: 25,
            x2: xORy,
            y2: 30,
            text: null,
            ids: (Math.random() * 1000)
        })
        leftGroup.value.push({
            x1: 25,
            y1: xORy,
            x2: 30,
            y2: xORy,
            text: null,
            ids: (Math.random() * 1000)
        })
      

    } 
}

}
// 鼠标按下 -- 利用事件委托精确定位事件触发点
const onMousedownfn = (e)=>{
      e.preventDefault();
      let attrs = e.target.getAttribute('data-id');
      if(attrs && attrs=='canvas'){
        keys.value=true; 
        startposi.x = e.screenX;
        startposi.y = e.screenY;
        document.addEventListener('mousemove',moveCanvas);
      }  
}  

// 整个画布移动
const moveCanvas = (e)=>{
    // 视图移动不能超过自身宽高的一半；

       let attrs = e.target.getAttribute('data-id');
   
       if(keys.value && attrs=='canvas'){ 
        let rect = e.target.getBoundingClientRect();
        posi.x += e.screenX-startposi.x;
        posi.y += e.screenY-startposi.y;  
        // 临界点
          if(posi.x>(rect.width/2) || posi.x<(rect.width/2)*-1){
            posi.x = posi.x>0?(rect.width/2):(rect.width/2*-1);
          } 
          if(posi.y>(rect.height/2) || posi.y<(rect.height/2)*-1){
            posi.y = posi.y>0?rect.height/2:(rect.height/2)*-1;
          }  
          startposi.x = e.screenX;
          startposi.y = e.screenY; 
       }
       viewprot.value=Math.floor(posi.x/posi.y );
       // 将这里的值返回给父级
       
       emits('changePosi',{x:posi.x,y:posi.y})
} 
onMounted(()=>{
    createdoms();
    document.addEventListener('mouseup',()=>{
        keys.value=false;
        document.removeEventListener('mousemove',moveCanvas)
    })
})



</script>
<style lang="less">
.linetext {
    opacity: 0;
    animation: textShow .4s linear forwards; 
} 
@keyframes textShow {
    to {
        opacity: 1;
    }
} 
.linelimit {
    stroke-dasharray: 10 200;
    stroke-dashoffset: -100;
    will-change: auto; // 浏览器根据情况，自动进行优化
    animation: creates .5s ease-in-out forwards;
}

@keyframes creates {
    to {
        stroke-dashoffset: 0;
    }
}

.Scene {
    width: 800px;
    height: 500px;
    overflow: hidden;
    position: relative;
    padding: 40px;
    box-sizing: border-box;
    background-color: #eee;
    .scenebody{
          width: 100%;
          height: 100%;
          overflow: hidden; 
          z-index: -1; 
          transform-origin: 0 0 ;
          &:active{
            cursor: pointer;
          }
    }
    .SceneLineTop {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: 30px;
        background-color: #fff;
        z-index: 99;
    }

    .SceneLineLeft {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px; 
        background-color: #fff;
        z-index: 99;
       
    }
}</style>